<template>
  <div>
    <!-- <h2>无抽屉</h2>
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="关联数据">
        <div>
          <template v-for="(tag, index) in tags">
            <template v-if="tag.key === editKey">
              <a-input
                ref="EditInputKeyRef"
                type="text"
                size="small"
                placeholder="请输入key"
                :style="{ width: '78px' }"
                v-model="inputValueKey"
                @blur="handleInputConfirmEdit('key')"
                @keyup.enter="handleInputConfirmEdit('key')"
              />:
              <a-input
                ref="EditInputValueRef"
                type="text"
                size="small"
                placeholder="请输入value"
                :style="{ width: '78px',marginRight:'5px' }"
                v-model="inputValueValue"
                @blur="handleInputConfirmEdit('value')"
                @keyup.enter="handleInputConfirmEdit('value')"
              />
            </template>
            <a-tag v-else :key="tag.key" style="padding: 3px 7px">
              {{ tag.key }}:{{ tag.value }}
              <a-icon type="edit" @click="() => handleEdit(tag)" />
              <a-icon type="close" @click="() => handleClose(tag)" />
            </a-tag>
          </template>

          <template v-if="inputVisible">
            <a-input
              ref="inputKeyAdd"
              type="text"
              size="small"
              placeholder="请输入key"
              :style="{ width: '78px' }"
              v-model="inputValueKey"
              @blur="handleInputConfirm('key')"
              @keyup.enter="handleInputConfirm('key')"
            />:
            <a-input
              ref="inputValueAdd"
              type="text"
              placeholder="请输入value"
              size="small"
              :style="{ width: '78px' }"
              v-model="inputValueValue"
              @blur="handleInputConfirm('value')"
              @keyup.enter="handleInputConfirm('value')"
            />
          </template>

          <a-tag v-else style="background: #fff; border-style: dashed;" @click="showInput">
            <a-icon type="plus" />新增
          </a-tag>
        </div>
      </a-form-item>
    </a-form>-->
    <h2>有抽屉</h2>
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
      <a-row>
        <a-col :span="8">
          <a-form-item label="规则代码">
            <a-input />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="规则名称">
            <a-input />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="有效时间">
            <a-input />
          </a-form-item>
        </a-col>
        <a-col :flex="1">
          <a-form-item :label-col="{ span: 2 }" label="关联数据">
            <div>
              <template v-for="(tag, index) in tags">
                <a-tag
                  closable
                  @close="() => handleClose(tag)"
                  :key="`${tag.key}-${tag.value}`"
                  @click="() => handleEdits(tag)"
                  style="padding: 3px 7px"
                >{{ tag.key }}:{{ tag.value }}</a-tag>
              </template>
              <a-tag style="background: #fff; border-style: dashed;" @click="showInputs">
                <a-icon type="plus" />新增
              </a-tag>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <DrawerDemo :visible="visible" :onClose="onClose" :onSuccess="onSuccess">
      <a-form :form="form1" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="key值">
          <a-select
            v-decorator="['key', { rules: [{ required: true, message: '请输入key值' }] }]"
            :options="keyOptions"
          />
        </a-form-item>
        <a-form-item label="value值">
          <a-input
            v-if="!valueOptions.length"
            v-decorator="['value', { rules: [{ required: true, message: '请输入value值' }] }]"
          />
          <a-select
            v-else
            v-decorator="['value', { rules: [{ required: true, message: '请输入value值' }] }]"
            :options="valueOptions"
          />
        </a-form-item>
      </a-form>
    </DrawerDemo>
  </div>
</template>
<script>
import DrawerDemo from './drawerDemo.vue'

export default {
  props: [],
  data() {
    return {
      form: this.$form.createForm(this),
      form1: this.$form.createForm(this, {
        onValuesChange: (props, values, allValues) => {
          const { key } = allValues
          if (key === 'key3') {
            this.valueOptions = [
              {
                value: 'key3-value1',
                label: 'key3-value1',
              },
              {
                value: 'key3-value2',
                label: 'key3-value2',
              },
            ]
          } else {
            this.valueOptions = []
          }
        },
      }),
      visible: false,
      valueOptions: [],
      keyOptions: [
        {
          value: 'key1',
          label: 'key1',
        },
        {
          value: 'key2',
          label: 'key2',
        },
        {
          value: 'key3',
          label: 'key3',
        },
        {
          value: 'key4',
          label: 'key4',
        },
        {
          value: 'key5',
          label: 'key5',
        },
      ],
      tags: [
        {
          key: 'key1',
          value: 'tag1',
        },
        {
          key: 'key2',
          value: 'tag2',
        },
        {
          key: 'key3',
          value: 'tag3',
        },
        {
          key: 'key4',
          value: 'tag4',
        },
        {
          key: 'key5',
          value: 'tag5',
        },
      ],
      inputVisible: false,
      editKey: '',
      inputValueKey: '',
      inputValueValue: '',
    }
  },
  components: { DrawerDemo },
  created() {},
  computed: {},
  methods: {
    onClose() {
      this.visible = false
    },

    async onSuccess() {
      try {
        const values = await this.form1.validateFields()
        if (this.type === 'add') {
          this.tags.push({
            key: values.key,
            value: values.value,
          })
        } else {
          this.tags = this.tags.map((tag) => {
            if (tag.key === this.edit.key && tag.value === this.edit.value) {
              return {
                key: values.key,
                value: values.value,
              }
            }
            return tag
          })
        }
      } catch (error) {}
      this.visible = false
    },

    handleClose(removedTag) {
      const tags = this.tags.filter((tag) => tag !== removedTag)
      console.log(tags)
      this.tags = tags
    },

    handleEdit(tag) {
      this.editKey = tag.key
      this.inputVisible = false
      this.$nextTick(function() {
        console.log(this.$refs)
        this.inputValueKey = tag.key
        this.inputValueValue = tag.value
        this.$refs.EditInputKeyRef && this.$refs.EditInputKeyRef[0].focus()
      })
    },

    handleEdits(tag) {
      this.edit = tag
      this.$nextTick(() => {
        this.form1.setFieldsValue({
          key: tag.key,
          value: tag.value,
        })
        this.visible = true
      })
    },

    showInput() {
      this.inputVisible = true
      this.editKey = ''
      this.$nextTick(function() {
        this.$refs.inputKeyAdd && this.$refs.inputKeyAdd.focus()
      })
    },

    showInputs() {
      this.type = 'add'
      this.visible = true
    },

    handleInputConfirmEdit(type) {
      if (type === 'key') {
        this.$refs.EditInputValueRef[0].focus()
        return
      }
      if (this.inputValueKey && this.inputValueValue) {
        this.tags = this.tags.map((tag) => {
          if (tag.key === this.editKey) {
            return {
              key: this.inputValueKey,
              value: this.inputValueValue,
            }
          }
          return tag
        })
      }

      Object.assign(this, {
        editKey: '',
        inputValueKey: '',
        inputValueValue: '',
      })
    },

    handleInputConfirm(type) {
      if (type === 'key') {
        this.$refs.inputValueAdd.focus()
        return
      }
      if (this.inputValueKey && this.inputValueValue) {
        this.tags = [
          ...this.tags,
          {
            key: this.inputValueKey,
            value: this.inputValueValue,
          },
        ]
      }
      Object.assign(this, {
        inputVisible: false,
        inputValueKey: '',
        inputValueValue: '',
      })
    },
  },
}
</script>
<style lang="scss" scoped>
</style>
